<template>
  <!-- navbar -->
  <div class="navbar">
    <PublishNavbar></PublishNavbar>
  </div>

  <!-- 步骤条 -->
  <div class="step" v-if="false">
    <div class="re-edit">
      <el-button class="re-edit-btn" type="primary">重新编辑</el-button>
      <el-button class="re-edit-btn" type="primary">取消发布</el-button>
    </div>
    <div class="step-bar">
      <StepBar></StepBar>
    </div>
  </div>

  <!-- centent -->
  <div class="content">
    <PublishContent></PublishContent>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, } from "vue"
import PublishNavbar from './components/Navbar/index.vue'
import StepBar from './components/StepBar/index.vue'
import PublishContent from './components/Content/index.vue'

</script>

<style lang="less" scoped>
@border-color: #dcdfe6; //边框默认颜色

.step {
  width: 100%;
  padding: 20px 0;
  background-color: #fff;
  position: relative;
  &-bar {
    flex: 1;
  }

  .re-edit {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding-left: 40px;
  }
}

.content {
  margin-top: 20px;
  border: 1px solid @border-color;
  border-radius: 10px;
  padding: 20px;
  background-color: #fff;
}
</style>